<template>
    <el-tooltip  class="p-tooltip" :effect="effect" :content="content" placement="right" :open-delay="openDelay">
        <slot></slot>
    </el-tooltip>
</template>

<script>

export default {
    name: 'p-tooltip',
    props: {
        content: String,
        effect: {
            type: String,
            default: 'dark'
        },
        openDelay: {
            type: Number,
            default: 600
        },
    },
    data() {
        return {};
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {}
    }
};
</script>
<style lang="scss">
.p-tooltip {
    position: absolute;
    left: 10px;
    bottom: 0;
    // top: 0;
    height: 38px;
    width: 100%;
    color: whitesmoke;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 3px 0 6px #cccccc;
    display: flex;
    align-items: center;

    .left {
        display: flex;
        align-items: center;
        /*flex: 1 1 auto;*/
        flex: 0 0 auto;
        flex-wrap: wrap;
    }
    .right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-width: 150px;
        /*width: 150px;*/
        height: 22px;
        margin: 0 2px 0 0;
        padding: 2px 6px;
        /*border: #f2f2f4 1px solid;*/
        border: #b6b9c2 1px solid;
        border-radius: 3px;
        flex: 0 0 auto;
        /*color: #f2f2f4;*/
        color: #454a60;
        font-size: 10px;
    }

    .icon {
        cursor: pointer;
        width: 26px;
        height: 26px;
        font-size: 20px;
        font-weight: 300;
        margin: -2px 0 0 10px;
        border-radius: 6px;
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #808080;

        &:hover {
            font-size: 22px;
            background: #cccccc;
        }
        &.selected {
            font-size: 22px;
            background: #999999;
            color: #f2f2f4;
        }
    }

    .spliter {
        width: 0px;
        height: 16px;
        background: #ffffff;
        margin: 0 10px;
        border-left: #cccccc 1px solid;
        border-right: #333333 1px solid;
    }
}
</style>
